<template>
	<view>
		<view class="first">
      <view class="title">预定酒店详情</view>
      <view class="intro">
        <view class="intro-left">
          <!-- <image src="/static/public/car.png" /> -->
        </view>
        <view class="intro-right">
            <view class="top">
              <view>伊犁化境云端牧哥</view>
               <view class="tag">
                 <u-icon name="calendar" color="#61916f" labelColor="#61916f" label="06-15" labelSize="13"></u-icon>
               </view>
            </view>
          <view class="bottom">
            ¥1500
          </view>
        </view>
      </view>
    </view>
    <view class="second">
      <view class="title">出行信息</view>
      <view class="info">
        <view><text>罗玉婷</text><text style="padding-left: 20rpx">142061******896</text></view>
        <view class="phone">19929833495</view>
      </view>
    </view>
   <view style="padding: 30rpx">
     <u-button  color="#000" text="提交" @click="toSuccess"></u-button>
   </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
      toSuccess(){
        uni.navigateTo({
          url: '/pages/whotel/hotelSuccess'
        })
      }
		}
	}
</script>

<style lang="scss">
page{
  background-color: #F5F5F5;
}
.title{

  position: relative;
  padding-left: 20rpx;
  font-size: 32rpx;
  line-height: 40rpx;
}
.title::after{
  content: "";
  width: 8rpx;
  height: 30rpx;
  background-color: #61916f;
  position: absolute;
  left: 0;
  top: 5rpx;
  border-radius: 99rpx;
}
.first{
  margin-top: 30rpx;
  padding:30rpx;
  background-color: white;
  border-radius: 30rpx;
  .intro{
    display: flex;
    margin-top: 30rpx;
    &-left{

    image{
      width: 180rpx;
      height: 180rpx;
    }
    }
    &-right{
    margin-left: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top{
        .tag{
          background-color: #F3F8F5;
          width: 120rpx;
          padding: 10rpx;
          border-radius: 10rpx;
          margin-top: 10rpx;

        }
      }
      .bottom{
        padding-bottom: 20rpx;
        font-size: 36rpx;
      }
    }
  }
}
.second{
  margin-top: 30rpx;
  padding:30rpx;
  background-color: white;
  border-radius: 30rpx;
  .info{
    padding: 20rpx;
    background-color: #F6F6F6;
    border-radius: 30rpx;
    margin-top: 30rpx;
    .phone{
      margin-top: 10rpx;
      color: gray;
    }
  }
}
</style>
